/**
 * 提煤单管理检索模块
 * @author xiaoxujs
 */

import { Button, Form, FormProps, Input, Popover, Select } from "antd";
import { FC, useEffect, useState } from "react";
import { IPcdZyVehicleInfoSelectParamsForm } from "../../../../../type/paichedan";
import { handleGetDictionaryItem } from "../../../../../assets/fun/DictionaryItem";
import { ISelectList } from "../../../../../type/antd";
import { ShengDiv, ShengTanchaung } from "../../../../../assets/style/ShengTanchaung";
import { licensePlateAbbreviations } from "../../../../../assets/data";

const SearchModule: FC<{
    handleSearchCallback: (params: IPcdZyVehicleInfoSelectParamsForm) => void;
}> = ({
    handleSearchCallback
}) => {


        type FieldType = {
            dispatchNum?: string;
            plateNumber?: string;
            driverName?: string;
            contactNumber?: string;
            dispatchType?: string;
        };

        const [form] = Form.useForm();

        const [plateColor, setPlateColor] = useState<string>('黄')// 
        const [carColorList, setCarColorList] = useState<ISelectList[]>([]); // 车辆类型字典项
        const [carSheng, setCarSheng] = useState('陕'); // 省
        const [carShengShow, setCarShengShow] = useState(false); // 省弹窗显示与否

        useEffect(() => {
            let carArr = handleGetDictionaryItem('CPYS');
            let carArr1: ISelectList[] = []
            carArr.forEach(element => {
                carArr1.push({
                    value: element.label,
                    label: element.label
                })
            });
            setCarColorList(carArr1);

        }, [])

        const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
            console.log('Success:', values);
            const params = {
                ...values,
                plateNumber: carSheng + values.plateNumber,
                plateColor,
            }
            handleSearchCallback(params);
        };
        // 重置
        const handleReset = () => {
            setPlateColor('黄');
            form.resetFields();
            handleSearchCallback({});
        }
        const ShengHtml = <ShengTanchaung>
            {
                licensePlateAbbreviations.map((item) => {
                    return <div
                        key={item}
                        className={carSheng === item ? 'li-car active' : 'li-car'}
                        onClick={() => {
                            setCarSheng(item);
                        }}
                    >
                        {item}
                    </div>
                })
            }
        </ShengTanchaung>
        const selectAfter = (
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <Select value={plateColor} onChange={(value) => setPlateColor(value)} style={{ width: '6.6rem' }} options={carColorList} />
                <Popover content={ShengHtml} trigger="click" onOpenChange={(open) => {
                    setCarShengShow(open)
                }}>
                    <ShengDiv>
                        <span style={{ color: !carShengShow ? 'rgba(0, 0, 0, 0.88)' : 'rgba(0, 0, 0, 0.45)' }} >{carSheng}</span><span className="iconfont" style={{ fontSize: '1.2rem', color: 'rgba(0, 0, 0, 0.88)' }}>&#xe661;</span>
                    </ShengDiv>
                </Popover>
            </div>

        );
        return <div style={{
            padding: '2rem 0'
        }}>
            <Form
                name="basic"
                labelCol={{ span: 2 }}
                wrapperCol={{ span: 22 }}
                onFinish={onFinish}
                autoComplete="off"
                layout='inline'
                form={form}
            >
                <Form.Item<FieldType>
                    name="dispatchNum"
                >
                    <Input placeholder="请输入派车单号" style={{ width: '20rem' }} />
                </Form.Item>

                <Form.Item<FieldType>
                    name="plateNumber"
                >
                    <Input addonBefore={selectAfter} placeholder="请输入车牌号!" />
                </Form.Item>
                <Form.Item<FieldType>
                    name="driverName"
                >
                    <Input placeholder="请输入司机姓名" style={{ width: '20rem' }} />
                </Form.Item>
                <Form.Item<FieldType>
                    name="contactNumber"
                >
                    <Input placeholder="请输入联系电话" style={{ width: '20rem' }} />
                </Form.Item>
                {/* <Form.Item<FieldType>
                name="dispatchType"
            >
                <Select placeholder='请选择派车类型' options={handleGetDictionaryItem(pypeOfVehicleDispatch)} style={{ width: '20rem' }} />

            </Form.Item> */}
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button style={{ border: '.1rem solid #C8E3FF' }} color="primary" variant="filled" htmlType="submit" icon={<span className="iconfont">&#xe605;</span>}>
                        查询
                    </Button>

                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button onClick={() => handleReset()} icon={<span className="iconfont">&#xe67d;</span>}>
                        重置
                    </Button>

                </Form.Item>
            </Form>
        </div>
    }

export default SearchModule;